<template>
    <el-dialog title="用户选择" :visible.sync="dialogVisible" :close-on-click-modal="false" @open="btnDisabled=false"
               @close="handleClose" size="small">
        <el-form :model="queryForm" :inline="true" class="demo-form-inline">
            <el-form-item>
                <el-input v-model="queryForm.userCode" placeholder="账号"></el-input>
            </el-form-item>
            <el-form-item>
                <el-input v-model="queryForm.userName" placeholder="姓名"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getData">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="easyPage.records" @selection-change="select" ref="singleTable" highlight-current-row
                  style="width:
        100%" border>
            <el-table-column type="selection" width="50"/>
            <el-table-column type="index" class-name="index-table"/>
            <el-table-column prop="userCode" label="账号"/>
            <el-table-column prop="userName" label="名称"/>
            <el-table-column prop="idNumber" label="身份证号"/>
            <el-table-column prop="phone" label="联系电话"/>
        </el-table>
        <common-page v-model="easyPage" @change="getData" @current-change="getData"/>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleSubmit" :disabled="btnDisabled">确 定</el-button>
        </div>
    </el-dialog>
</template>
<script>
  import CommonPage from '../../../components/common/CommonPage.vue'

  export default {
    components: {CommonPage},
    name: 'except-role-user-dialog',
    props: {
      roleId: {
        type: String,
        required: true
      },
      value: {
        type: Boolean,
        required: true
      },
      sysCode: {
        type: String,
        required: true
      },
    },
    watch: {
      value: function () {
        this.dialogVisible = this.value
        this.easyPage.current = 1
        this.easyPage.size = 10
        this.getData()
      }
    },
    created () {
    },
    data () {
      return {
        dialogVisible: false,
        btnDisabled: false,
        queryForm: {},
        easyPage: {
          current: 1,
          size: 10
        },
        selection:[]
      }
    },
    methods: {
      getData () {
        let self = this
        Object.assign(self.queryForm, {
          current: self.easyPage.current,
          size: self.easyPage.size,
          roleId: self.roleId,
          sysCode:self.sysCode
        })
        self.$axios
          .post('roleUserAction/findUserPageExceptRoleId', self.queryForm)
          .then((res) => {
            self.easyPage = res.data
          })
      },
      handleClose (value) {
        this.$emit('input', this.dialogVisible)
        this.$emit('close')
      },
      select(selection){
        this.selection = selection;
      },
      handleSubmit () {
        let self = this
        if(self.selection.length==0){
          self.$alert('请选择用户', '提示!')
          return;
        }
        let json = {
          roleId: self.roleId,
          secUsers: self.selection
        }
        self.btnDisabled = true
        self.$axios
          .post('roleUserAction/saveRoleUser', {json: JSON.stringify(json)})
          .then(function (res) {
            if (res.data.result) {
              self.$message({
                message: '保存成功',
                type: 'success'
              })
              self.dialogVisible = false
            } else {
              self.btnDisabled = false
              self.$message.error(res.data.msg)
            }
          })
      }

    }
  }
</script>
